<template>
  <div>
     <van-nav-bar
      title="支付成功"
      fixed
      placeholder
      z-index="999"
      left-arrow
      @click-left="$router.back()"
    />
<div class="paySuccessPage">
<div class="icon">
   <van-icon size="30" color="green"  name="checked" />
</div>
<div class="text">
    支付成功
</div>

<div class="tips">
  您可以通过您的核销码去商家进行扫码验票

</div>


<div class="qrBox">

    <div>{{detail.orderSn}}</div>
    <img class="qrCode" src="" alt="">
    <div>{{detail.person}}张电影票</div>
</div>


</div>


<van-button size="large" color="#DB281F">保存图片</van-button>

  </div>
</template>

<script>
export default {
   name:"paySuccess",
   created(){
       this.getOrderDetail()
   },
   data(){
    return {
         detail:{} 
    }
   },
   methods:{

      getOrderDetail(){

          let uni_id_token = localStorage.getItem('xl-token');

          let orderId = this.$route.query.orderId

          this.$http.post('/order/kh/orderDetail',{
               uni_id_token,
               orderId
          })
          .then(res=>{
              console.log(res)

              this.detail = res.data;
          })
      }
   }
}
</script>

<style lang="scss">

.paySuccessPage{

    width: 100%;
    height: auto;
    text-align: center;

    .icon{
         text-align: center;
        margin: 20px 0;
    }
    .text{
        font-size: 16px;
    }
    .tips{
        font-size: 12px;
        color: #999;
    }

    .qrBox{

        width: 200px;
        height: 200px;
        margin: 20px auto;
        border-radius: 5px;
        box-shadow: 0 0 10px 3px rgba($color: #000000, $alpha: 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .qrCode{
        width: 100px;
        height: 100px;
        margin: 2px 0;
    }


}



</style>